<template>
    <div id="app">
        <!-- 面包屑 -->
        <div id="breadcrumb_box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item><span id="current">货号管理</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-card>
            <el-row>
                <el-col :span="19">
                    <span style="font-size: 15px; color: #2c9678; font-weight: 700;">
                        货物新建/查询
                    </span>
                </el-col>
                <el-col :span="3">
                    <el-button icon="el-icon-plus" id="add" @click="addGoodsDialog = true"
                        :disabled="!$store.state.current.isGoodsManage">
                        新增货物
                    </el-button>
                </el-col>
                <el-col :span="2">
                    <el-button icon="el-icon-search" id="search" @click="search_goods()">
                        查询
                    </el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="5">
                    <span style="font-size: 15px">
                        货号：
                    </span>
                    <el-input v-model="inquire.gid" placeholder="请输入..." style="width: 180px"
                        @keyup.enter.native="search_goods()"></el-input>
                </el-col>
                <el-col :span="5">
                    <span style="font-size: 15px">
                        货物名：
                    </span>
                    <el-input v-model="inquire.goodsName" placeholder="请输入..." style="width: 160px"
                        @keyup.enter.native="search_goods()"></el-input>
                </el-col>
                <el-col :span="4">
                    <span style="font-size: 15px">
                        尺寸：
                    </span>
                    <el-select v-model="inquire.size" placeholder="请选择" style="width: 120px">
                        <el-option v-for="item in sizes" :key="item.id" :label="item.label" :value="item.id"
                            @click.native="search_goods()">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="8">
                    <span style="font-size: 15px">
                        价格区间：
                    </span>
                    <el-input v-model="inquire.minPrice" placeholder="请输入..." style="width: 150px"
                        onkeyup="value=value.replace(/[^\d]/g,'')" @keyup.enter.native="search_goods()"></el-input>
                    ---
                    <el-input v-model="inquire.maxPrice" placeholder="请输入..." style="width: 150px"
                        onkeyup="value=value.replace(/[^\d]/g,'')" @keyup.enter.native="search_goods()"></el-input>
                </el-col>
            </el-row>
        </el-card>

        <!-- 表格区域 -->
        <list ref="child"></list>

        <!-- 弹窗 -->
        <el-dialog title="新增货物" :visible.sync="addGoodsDialog">
            <el-form v-model="addGoods">
                <el-form-item label="货物名:" :label-width="'200px'">
                    <el-input style="width:300px" v-model="addGoods.goodsName">
                    </el-input>
                </el-form-item>
                <el-form-item label="色号:" :label-width="'200px'">
                    <el-input style="width:300px" v-model="addGoods.color">
                    </el-input>
                </el-form-item>
                <el-form-item label="尺寸:" :label-width="'200px'">
                    <el-select v-model="addGoods.size" placeholder="请选择" style="width: 200px">
                        <el-option v-for="item in sizes" :key="item.id" :label="item.label" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格:" :label-width="'200px'">
                    <el-input style="width:200px" v-model="addGoods.price">
                    </el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" id="add" @click="add_goods()">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改货物" :visible.sync="$store.state.Modify.goodsModify">
            <el-form>
                <el-form-item label="货物名:" :label-width="'200px'">
                    <el-input style="width:300px" v-model="$store.state.Modify.row.goodsName">
                    </el-input>
                </el-form-item>
                <el-form-item label="色号:" :label-width="'200px'">
                    <el-input style="width:300px" v-model="$store.state.Modify.row.color">
                    </el-input>
                </el-form-item>
                <el-form-item label="尺寸:" :label-width="'200px'">
                    <el-select v-model="$store.state.Modify.row.size" placeholder="请选择" style="width: 200px">
                        <el-option v-for="item in sizes" :key="item.id" :label="item.label" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格:" :label-width="'200px'">
                    <el-input style="width:200px" v-model="$store.state.Modify.row.price">
                    </el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" id="submit" @click="modify_goods()">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="$store.state.Delete.goodsDelete" width="30%">
            <span>确定删除该货物？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="$store.state.Delete.goodsDelete = false">取 消</el-button>
                <el-button type="danger" @click="delete_goods()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script src="../../assets/js/admin/goods_manage.js">
</script>

<style scoped src="../../assets/css/admin/manage.css">
</style>